<template>
    <div id="registor" style="font-size:0.16rem">
        <div class="registor-box">
            <!-- <p class="topicon">&lt;</p> -->
           <div class="registor-containner">
                <p class="retitle">
                    欢迎加入宅寂
                </p>
                <div class="reform">
                    <form action="" >
                            <div class="rephone-box">
                                <input v-model="phone" type="text" name="phone" @blur="blurphone($event)" class="rephone" placeholder="请输入手机号">
																<div v-if="phoneyz">
																	<span v-if="pyz" class="gou">√</span>
																	<span v-else class="cuo">X</span>
																</div>
														</div>
                            <div class="repassword-box">
                                 <input v-model="password" type="password" name="password" class="repassword" placeholder="请输入六位到十六位密码" autocomplete="new-password">
																 <div v-if="passwordyz">
																	 <span class="gou" v-if="passyz">√</span>
																	 <span class="cuo" v-else>X</span>
																 </div>
                            </div>

                            <input type="button" @click="handleClick" class="rebtn" :class="{active:isto}" value="注册">
                    </form>
                </div>
                <div class="refoot">
                    <span class="respan1">注册代表你已同意</span>
                    <span class="respan2">《用户协议》</span>
                </div>
           </div>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      phone: "",
      password: "",
      isto: false,
			pyz:false,
			passyz:false,
			phoneyz:false,
			passwordyz:false
    };
  },
  methods: {
    blurphone(e){
      if(e.target.value.length!=11){
         // alert("请输入11位手机号")
      }else{
         let postData = this.$qs.stringify({
                phone: this.phone,
              });
      if (this.pyz) {
        this.axios({
          url: `${this.$config.dataUrl}/v1/user/yanzheng`,
          method:"post",
          data:postData
        }).then(res => {
          if(res.data.status==500){
            alert("用户已存在，请重新输入")
            this.phone=""
            console.log(res)
          }
        });
      }
      }
    },
    handleClick(e) {
       let postData = this.$qs.stringify({
                phone: this.phone,
          password: this.password
              });
      console.log(this.phone,this.password)
      if (this.isto) {
        this.axios({
          url: `${this.$config.dataUrl}/v1/user/regist`,
          method:"post",
          data:postData
        }).then(res => {
          alert("注册成功")
          if (res.data.status == 200) {
            this.$router.push("/login");
          }
        });
      }
    }
  },
  watch: {
    phone(v,old) {
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(v.length>11){
				this.phone=old;
				console.log(1)
			}
			if(v.length==0){
				this.phoneyz=false
			}else{
				this.phoneyz=true
			}
			if(myreg.test(v)){
				this.pyz=true;
			}else{
				this.pyz=false
			}
      if (this.pyz&&this.passyz) {
        this.isto = true;
      } else {
        this.isto = false;
      }
    },
    password(v,old) {
      var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
			if(v.length==0){
				this.passwordyz=false
			}else{
				this.passwordyz=true
			}
			if(v.length>=6&&v.length<=16){
				this.passyz=true
			}else{
				this.passyz=false;
			}
			if(v.length>16){
				this.password=old;
			}
      if (this.passyz&&this.pyz) {
        this.isto = true;
      } else {
        this.isto = false;
      }
    }
  }
};
</script>
<style scoped>
#registor {
  width: 19.2rem;
  height: 9rem;
  background-image: url("../../assets/img/registor/bg.png");
}
.registor-box {
  width: 5rem;
  height: 6rem;
  background-color: #fff;
  position: absolute;
  top: 1.9rem;
  left: 7.1rem;
}
.topicon {
  line-height: 0.9rem;
  margin-left: 0.37rem;
  font-size: 0.24rem;
  font-weight: 900;
}
.retitle {
  width: 3rem;
  text-align: center;
  position: absolute;
  top: 1.2rem;
  font-size: 0.22rem;
  line-height: 0.22rem;
  left: 1rem;
}
.reform input {
  position: absolute;
  display: block;
  width: 3rem;
  border: 0;
  line-height: 0.48rem;
  height: 0.48rem;
  border-bottom: 0.01rem solid #ccc;
  outline: none;
  font-size: 0.16rem;
  left: 1rem;
}
.reform .rephone {
  top: 1.65rem;
}
.rephone:after {
  content: "";
  width: 1rem;
  height: 1rem;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}

.reform .repassword {
  top: 2.13rem;
}
.reform .rebtn {
  width: 3rem;
  height: 0.5rem;
  position: absolute;
  top: 3.34rem;
  left: 1rem;
  color: #fff;
  font-size: 0.22rem;
	cursor: not-allowed;
}
.reform .rebtn.active {
  background-color: green;
	cursor:pointer
}
.refoot {
  position: absolute;
  top: 4.27rem;
  left: 1rem;
  width: 3rem;
  text-align: center;
  color: #d2d2d2;
  font-size: 0.16rem;
}
.refoot .respan2 {
  color: #000;
}
.rephone-box .gou{
	position:absolute;
	top:1.7rem;
	left:3.6rem;
	color:#0f0;
	font-size:0.24rem;
}
.repassword-box .gou{
	position:absolute;
	top:2.2rem;
	left:3.6rem;
	color:#0f0;
	font-size:0.24rem;
}
.rephone-box .cuo{
	position:absolute;
	top:1.7rem;
	left:3.6rem;
	color:#f00;
	font-size:0.24rem;
}
.repassword-box .cuo{
	position:absolute;
	top:2.2rem;
	left:3.6rem;
	color:#f00;
	font-size:0.24rem;
}
</style>
